import React from 'react'
import { useState } from 'react'
/** 图核心组件 & 类型定义 */
import { IAppLoad, NsEdgeCmd, NsGraph, XFlowEdgeCommands } from '@antv/xflow'
import { XFlow, XFlowCanvas } from '@antv/xflow'
/** 图的各种扩展交互组件 */
import { CanvasMiniMap, CanvasScaleToolbar, CanvasSnapline, CanvasToolbar, NodeCollapsePanel } from '@antv/xflow'
// 折叠面板配置
import * as panelConfig from './dnd-panel-config'
/** 图的配置项 */
import { useGraphConfig } from './config-graph'
import { useToolbarConfig } from './toolbar-config'
import { getChartflowData } from '@net/dataview/index'
// import { message } from 'antd'
// import {useCmdConfig} from './edge-config'

import './index.scss'
import '@antv/xflow/dist/index.css'

export interface IProps { }

export let APP: any = null

export default () => {
  /** 画布配置 */
  const graphConfig = useGraphConfig()
  // 工具配置
  const toolbarConfig = useToolbarConfig()

  // const cmdConfig = useCmdConfig()

  /** 画布渲染数据 */
  const [graphData, setGraphData] = useState<NsGraph.IGraphData>()

  /** XFlow初始化完成的回调 */
  const onLoad: IAppLoad = async (app: any) => {
    APP = app
    const res: any = await getChartflowData();
    // console.log('res====',res);
    res.data.nodes.forEach((item: any) => {
      item.id = item.fcId
      item.ports = {
        groups: {
          // 输入链接桩群组定义
          left: {
            position: 'left',
            attrs: {
              circle: {
                r: 6,
                magnet: true,
                stroke: '#31d0c6',
                strokeWidth: 2,
                fill: '#fff',
              },
            },
          },
          // 输出链接桩群组定义
          right: {
            position: 'right',
            attrs: {
              circle: {
                r: 6,
                magnet: true,
                stroke: '#31d0c6',
                strokeWidth: 2,
                fill: '#fff',
              },
            },
          },
          top: {
            position: 'top',
            attrs: {
              circle: {
                r: 6,
                magnet: true,
                stroke: '#31d0c6',
                strokeWidth: 2,
                fill: '#fff',
              },
            },
          },
          bottom: {
            position: 'bottom',
            attrs: {
              circle: {
                r: 6,
                magnet: true,
                stroke: '#31d0c6',
                strokeWidth: 2,
                fill: '#fff',
              },
            },
          },
        },
        items: [
          {
            id: 'port1',
            group: 'top',
          },
          {
            id: 'port2',
            group: 'right',
          },
          // {
          //   id: 'port3',
          //   group: 'in',
          // },
          {
            id: 'port4',
            group: 'bottom',
          },
          {
            id: 'port5',
            group: 'left',
          },
        ],
      }
    })
    res.data.edges.forEach((item: any) => {
      item.id = item.fcId
    })
    const nodes: NsGraph.INodeConfig[] = res.data.nodes;
    const edges: NsGraph.IEdgeConfig[] = res.data.edges;
    const newGraphData = { nodes, edges }
    setGraphData(newGraphData)
    const graph = await app.getGraphInstance();
    // graph.on('node:click', ({ node }) => {
    //   const nodeData: NsGraph.INodeConfig = node.getData()
    //   message.success(`${nodeData.id}节点被点击了`);
    // })
    graph.on('edge:click', (config: any) => {
      config.edge.toFront()
      const edgeData: NsGraph.IEdgeConfig = config.edge.getData()
      console.log(edgeData);
      // message.success(`${edgeData.id}连线被点击了`)
    })
  }
  return (
    <div className='box'>
      <XFlow
        className="xflow-user-container"
        graphData={graphData}
        onLoad={onLoad}
        isAutoCenter={true}
      >
        <CanvasToolbar
          className='custom-toolbar'
          layout="horizontal"
          config={toolbarConfig}
          position={{ top: 0, left: 200, right: 0, height: 40 }}
        />
        <NodeCollapsePanel
          header={<h4 className="dnd-panel-header"> 组件 </h4>}
          footer={<div> antv xFlow study </div>}
          onNodeDrop={panelConfig.onNodeDrop}
          nodeDataService={panelConfig.nodeDataService}
          position={{ top: 0, bottom: 0, left: 0, width: 200 }}
        />
        <XFlowCanvas config={graphConfig} position={{ top: 0, bottom: 0, left: 200, right: 0 }}>
          <CanvasScaleToolbar position={{ top: 50, left: 0 }} />
          <CanvasMiniMap
            miniMapClz="xflow-custom-minimap"
            nodeFillColor="#ccc"
            minimapOptions={{
              width: 200,
              height: 120,
            }}
            position={{ bottom: 0, right: 0 }}
          />
          <CanvasSnapline />
        </XFlowCanvas>
      </XFlow>
    </div>
  )
}